<template>
  <div class="login-container">
    <div class="login-background"></div>

    <div class="login-content">
      <div class="login-header">
        <h1 class="login-title">欢迎回来</h1>
        <p class="login-subtitle">请登录您的账号</p>
      </div>

      <van-form @submit="handleLogin" class="login-form">
        <van-cell-group inset>
          <van-field
            v-model="loginForm.username"
            name="username"
            left-icon="user-o"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            class="custom-field"
          />

          <van-field
            v-model="loginForm.password"
            type="password"
            name="password"
            left-icon="lock"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            class="custom-field"
          />
        </van-cell-group>

        <div class="login-options">
          <van-checkbox v-model="rememberMe" shape="square" checked-color="#4e6ef2">记住我</van-checkbox>
        </div>

        <div class="login-buttons">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            class="login-btn"
          >
            立即登录
          </van-button>

          <div class="register-tip">
            还没有账号？<span class="register-link" @click="goToRegister">立即注册</span>
          </div>
        </div>
      </van-form>

      <div class="social-login">
        <div class="divider">
          <span class="divider-line"></span>
          <span class="divider-text">其他登录方式</span>
          <span class="divider-line"></span>
        </div>
        <div class="social-icons">
          <van-icon name="wechat" class="social-icon wechat" />
          <van-icon name="weibo" class="social-icon weibo" />
          <van-icon name="qq" class="social-icon qq" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Login">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserInfoStore } from '../stores/userInfo'
import { showToast, showFailToast } from 'vant'

const router = useRouter()
const useInfoStore = useUserInfoStore()

const loginForm = ref({
  username: '',
  password: ''
})

const rememberMe = ref(false)

const handleLogin = async () => {
  try {
    await useInfoStore.login(loginForm.value)
    await useInfoStore.getInfo()
    showToast({
      message: '登录成功',
      icon: 'passed',
      className: 'success-toast'
    })
    router.push({ name: 'home' })
  } catch (error) {
    console.error('登录失败:', error)
    showFailToast({
      message: error.message || '登录失败',
      className: 'fail-toast'
    })
  }
}

const goToRegister = () => {
  router.push({ name: 'register' })
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;

  .login-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(135deg, #4e6ef2 0%, #6a5acd 100%);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 0;
  }

  .login-content {
    width: 90%;
    max-width: 420px;
    background: #fff;
    border-radius: 16px;
    padding: 30px 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    z-index: 1;
    animation: fadeInUp 0.5s ease;
  }

  .login-header {
    text-align: center;
    margin-bottom: 30px;

    .login-title {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }

    .login-subtitle {
      font-size: 14px;
      color: #969799;
    }
  }

  .login-form {
    .van-cell-group {
      background: transparent;
      margin-bottom: 20px;

      &::after {
        display: none;
      }
    }

    .custom-field {
      padding: 14px 0;
      margin-bottom: 16px;
      border-radius: 8px;
      background-color: #f9f9f9;

      :deep(.van-field__left-icon) {
        color: #969799;
        margin-right: 10px;
      }

      :deep(.van-field__control) {
        font-size: 15px;

        &::placeholder {
          color: #c8c9cc;
        }
      }
    }
  }

  .login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;

    .van-checkbox {
      :deep(.van-checkbox__label) {
        color: #646566;
        font-size: 14px;
      }
    }

    .forgot-password {
      color: #4e6ef2;
      text-decoration: none;
      font-size: 14px;
    }
  }

  .login-buttons {
    .login-btn {
      height: 48px;
      border-radius: 8px;
      background: linear-gradient(to right, #4e6ef2, #6a5acd);
      border: none;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(78, 110, 242, 0.2);
      transition: all 0.3s;

      &:active {
        transform: scale(0.98);
      }
    }

    .register-tip {
      text-align: center;
      color: #969799;
      font-size: 14px;

      .register-link {
        color: #4e6ef2;
        font-weight: 500;
        cursor: pointer;
      }
    }
  }

  .social-login {
    margin-top: 30px;

    .divider {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .divider-line {
        flex: 1;
        height: 1px;
        background: #ebedf0;
      }

      .divider-text {
        padding: 0 12px;
        color: #969799;
        font-size: 12px;
      }
    }

    .social-icons {
      display: flex;
      justify-content: center;
      gap: 24px;

      .social-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
        cursor: pointer;
        transition: all 0.3s;

        &.wechat {
          background: #07C160;

          &:active {
            background: #06ad56;
          }
        }

        &.weibo {
          background: #E6162D;

          &:active {
            background: #d01429;
          }
        }

        &.qq {
          background: #12B7F5;

          &:active {
            background: #0ea5e0;
          }
        }
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 自定义Toast样式
:deep(.success-toast) {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 12px 20px;

  .van-icon {
    color: #07C160;
  }
}

:deep(.fail-toast) {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 12px 20px;

  .van-icon {
    color: #E6162D;
  }
}

@media (max-width: 375px) {
  .login-content {
    padding: 25px 20px;
    width: 85%;
  }

  .login-header {
    margin-bottom: 25px;

    .login-title {
      font-size: 22px;
    }
  }

  .login-buttons {
    .login-btn {
      height: 44px;
    }
  }
}
</style>